<template>
    <div class="selector-menu">
        <template v-if="searchData.length > 0">
            <div 
                class="menu-item"
                v-for="item in searchData" 
                :key="item.id"
                @click="setItemValue(item)">
                {{item.text}}
            </div>
        </template>
        <NoDataTip v-else />
    </div>
</template>

<script>
    import { onMounted, reactive, toRefs, watch } from 'vue'
    import NoDataTip from './NoDataTip.vue'
    export default {
        name:'SelectorMenu',
        props: {
            menuData: {
                type: Array,
                default: () => {
                    return []
                }
            },
            searchVal:{
                type:String,
                default:''
            }
        },
        components: {
            NoDataTip
        },
        setup(props, ctx) {
            const state = reactive({
                searchData:[]
            })
            onMounted(() => {
                state.searchData = props.menuData
            })

            watch(() =>{
                return props.searchVal
            },(newVal) =>{
                state.searchData = props.menuData.filter(mItem => mItem.text.toLowerCase().includes(newVal.toLowerCase()))
            })

            const setItemValue = (item) =>{
                ctx.emit('setItemValue',item)
            }
            return {
                ...toRefs(state),
                setItemValue
            }
        }

    }
</script>

<style lang="less" scoped>
  .selector-menu {
    display: none;
    position: absolute;
    left: 0;
    top: 48px;
    width: 100%;
    background-color: #fff;
    box-shadow: 0 0 10px #ddd;
    border-radius: 5px;
    cursor: pointer;
    
    .menu-item {
      height: 35px;
      text-align: center;
      line-height: 35px;
      font-size: 14px;
      color: #666;
      margin: 10px 0;
      transition: background-color .2s linear;

      &:hover {
        background-color: #ededed;
      }
    }
  }
</style>